<!--
 * @file 登录页面壳子
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2022/02/18
-->
<template>
  <div class="login-container">
    <div class="header">
      <img class="logo" :src="require('@/assets/img/logo.svg')" />
      <span class="title">基础管理系统</span>
    </div>
    <div class="main">
      <div class="main-container">
        <slot></slot>
      </div>
    </div>
    <footer>
      <img
        :src="require('@/assets/img/copyright.png')"
        style="margin-right: 5px"
      />
      <span>
        贵公安网备<a
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=5201120200xxxx"
          style="text-decoration: none; color: gray"
          target="_blank"
          >5201120200xxxx</a
        >号 | 黔ICP备1701xxxx号-2 | 增值电信业务经营许可证：黔B2-2018xxxx |
        网络食品交易第三方平台备案凭证：黔网食备字【2018】0001号</span
      >
      <a
        id="_xinchacharenzheng_cert_vip_kexinweb"
        style="text-decoration: none"
        target="_blank"
        href="https://xyt.xinchacha.com/pcinfo?sn=522654159858700288&certType=6"
      >
        <img src="https://xyt.xinchacha.com/img/icon/icon3.png" />
      </a>
    </footer>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'LoginContainer'
})
</script>

<style scoped lang="less">
.login-container {
  .header {
    height: 178px;
    display: flex;
    align-items: center;
    .title {
      font-size: 30px;
      margin-left: 15px;
      margin-top: 7px;
    }
    .logo {
      height: 40px;
    }
  }
  .main {
    height: 600px;
    background: url('../../assets/img/login/login-bg.svg') no-repeat center
      center;
  }

  .main-container {
    text-align: right;
    width: 1200px;
    margin: 0 auto;
  }

  .main-container > .form-wrap {
    width: 511px;
    height: 441px;
    background: #fff;
    display: inline-block;
    padding: 25px 50px;
    box-sizing: border-box;
    margin: 88px 0 91px 600px;
    border-radius: 4px;
    text-align: left;
    border-top: 3px solid red;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
  }
  .header .main-container {
    text-align: left;
  }
  footer {
    height: 100px;
    color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eaeefb;
    a {
      margin-left: 10px;
      width: 109.6px;
      height: 40px;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
